<template>
    <div>

        <div class="header">
            <div class="header_top">
                <img src="../assets/images/返回.png" @click="fanhui"  alt="">
                <img src="../assets/images/fanhuishouye.png" alt="">
            </div>
               <div class="luo">一叶花开一叶落</div>
        </div>
        <div class="content">
            <ul>
                <li @click="btn1">
                    <div style="margin-top:20px">
                        <span >
                        <img src="../assets/images/我的客户.png" alt="">
                    </span>
                    <p style="margin-bottom:10px;margin-top:10px">我的客户</p>
                    <span style="font-size:14px">MY CLIENTS</span>
                    </div>
                </li>
                <li @click="btn2">
                    <div style="margin-top:20px">
                        <span >
                        <img src="../assets/images/Customer.png" alt="">
                    </span>
                    <p style="margin-bottom:10px;margin-top:40px">客户关怀</p>
                    <span style="font-size:14px">CUSTOMER</span>
                    </div>
                </li>
                <li @click="btn3">
                    <div style="margin-top:20px">
                        <span >
                        <img src="../assets/images/消息中心.png" alt="">
                    </span>
                    <p style="margin-bottom:10px;margin-top:10px">物流单评价</p>
                    <span style="font-size:14px">WULIUPJ</span>
                    </div>
                </li>
                <li @click="btn4">
                    <div style="margin-top:20px">
                        <span >
                        <img src="../assets/images/消息中心.png" alt="">
                    </span>
                    <p style="margin-bottom:10px;margin-top:10px">消息中心</p>
                    <span style="font-size:14px">NEWS</span>
                    </div>
                </li>
                <li @click="btn5">
                    <div style="margin-top:20px">
                        <span >
                        <img src="../assets/images/物流单.png" alt="">
                    </span>
                    <p style="margin-bottom:10px;margin-top:10px">物流单</p>
                    <span style="font-size:14px">LOGISTICS</span>
                    </div>
                </li>
            </ul>

        </div>
        <div class="footer">
            <div>
                <img src="../assets/images/形状 557.png" width="22" height="22" alt="">
                <span style="color:#00439c">系统功能</span>
            </div>

            <div class="box-lianxi">
                <img src="../assets/images/联系.png" width="22" height="22" alt="">
                <span>联系</span>
            </div>
            <div @click="btn6">
                <img src="../assets/images/形状 566.png" width="22" height="22" alt="">
                <span>个人中心</span>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {

 
        }
    },
    methods: {
        fanhui(){
            this.$router.back()
        },
        //客户信息
         btn1(){
            this.$router.push('/home/funindex/customers')
        },
        //客户关怀
         btn2(){
            this.$router.push('/home/funindex/customerCare')
        },
        //物流单评价
         btn3(){
            this.$router.push('/home/funindex/logisticsList')
        },
         //消息中心
         btn4(){
            this.$router.push('/home/funindex/messageCenter')
        },
        //送货单
        btn5(){
            this.$router.push('/home/funindex/dispatchList')
        },
        btn6(){
            this.$router.push('/user/')
        }
    },
}
</script>
 
<style lang = "less" scoped>
.luo{
    width: 100%;
    text-align: center;
    color: #FFF;
}

.footer{
    width: 100vw;
    height: 65px;
    background: #fff;
    position: fixed;
    bottom: 0;left: 0;
    display: flex;
    justify-content: space-between;
    div{
        /* padding: 10px 45px; */
        width: 100px;
        text-align: center;
        margin-top: 10px;
        img{
            display: block;
            margin-top: 5px;
            margin-left: 40px;
            
        }
        
    }
    div:nth-of-type(2){
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background: #ffcc33;
        text-align: center;
        color: #fff;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0 0 4px 6px #efefef;
        margin-top: -15px;
        img{ 
             margin-left: 10px;
        }
    }
}
*{
    margin: 0;padding: 0;
}
.content{   
    margin-bottom: 30px;
    ul{
        padding: 28px 49px 42px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li{
            margin-bottom: 10px;
            width: 134px;
            height: 175px;
            background: #fff;
            text-align: center;
        }
    }
}
    .header{
        
        height: 175px;
        background: #003399;
        overflow: hidden;
        .header_top{
            padding: 31px 12px 15px;
            /* margin-top: 31px; */
            height: 22px;
            display: flex;
            justify-content: space-between;
            img{
                height: 100%;
            }
        }     
    }
</style>